<template>
	<view>
		<view class="pjDetail" v-for="(item,index) in comments" :key="index" >
			<view class="userInfo">
				<view class="userImg">
					<image :src="item.user.imgUrl"></image>
				</view>
				<view class="userName">
					<b><text>{{item.user.username}}</text></b>
				</view>
				<view class="time">
					<text>{{changeTime(item.time)}}</text> 
				</view>
			</view >
			<view class="pjtext">
				<text>{{item.comment}}</text>
			</view>
		</view>
		<!--每页展示7条,当商品的长度对7取余不等于0时说明,数据拉去完毕,才显示此样式-->
		<view class="dibu" v-if="this.comments.length % 7==0?false:true">
			<text>-----已查看全部评论-----</text>
		</view>
		<!--暂无评价-->
		<view class="zanwupingjia" v-if="this.comments.length==0">
			<text>暂无评价,欢迎选购</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//商品详情集合
				comments:[],
				//当前页
				pageIndex:1,
				foodId:null
			}
		},
		onLoad(options) {
			this.foodId=options.foodId;
			this.getComments();
		},
		methods: {
			//获取评论方法
			getComments(){
				uni.request({
					url:this.webUrl+'selectAllFoodCommentByFoodId',
					data:{
						'foodId':this.foodId,
						'pageIndex':this.pageIndex
					},
					success: (res) => {
						this.comments=[...this.comments,...res.data.list];
					},
					fail: (err) => {
						uni.showToast({
							title:"商品详情加载失败"
						})
					}
				})
			},
			//处理时间方法
			changeTime(time){
				return time.substring(0,16);
			}
		},
		//触底监测
		onReachBottom() {
			this.pageIndex++
			this.getComments();
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	//评价详情
	.pjDetail{
		float: left;
		width: 100%;
		background-color: white;
		margin-top:5rpx;
		.userInfo{
			float: left;
			width: 100%;
			height: 80rpx;
			.userImg{
				float: left;
				width: 45rpx;
				height: 45rpx;
				border: 3rpx solid rgb(200,200,200);
				margin-top: 10rpx;
				margin-left: 27rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.userName{
				float: left;
				width: 360rpx;
				height: 80rpx;
				font-size: 27rpx;
				line-height: 80rpx;
				margin-left: 20rpx;
				color: #00C5CD;
				
			}
			.time{
				float: left;
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 27rpx;
			}
		}
		.pjtext{
			float: left;
			width: 660rpx;
			margin-top: 20rpx;
			margin-left: 45rpx;
			margin-bottom: 20rpx;
			font-size: 27rpx;
		}
	}
	.dibu{
		float: left;
		width: 100%;
		height: 70rpx;
		background-color:rgb(240,240,240);
		margin-top: 30rpx;
		line-height: 70rpx;
		text-align: center;
		font-size:30rpx ;
	}
	//暂无评价,欢迎选购
	.zanwupingjia{
		width: 100%;
		height: 200rpx;
		float: left;
		line-height: 200rpx;
		text-align: center;
		margin-top: 450rpx;
		font-size: 80rpx;
		color: rgb(200,200,200);
		font-weight: bold;
	}
</style>
